{% extends '::overlayLayout.html.twig' %}

{% block js %}	
    <script>
            $(document).ready(function() {

            	$('#fancybox-wrap').css('width', 'auto');

            	$("button").live('click', function(e) {
                	e.preventDefault();
                });
                
                $("button").live("click",function() { 

					var isValid = true;
					$("input").each(function() {
				         if ($(this).val().length < 1) {
				        	 isValid = false;
				        	 $(this).prev("span.error").text("(obligatoire)").css({color: 'red'});
				             $(this).css({borderColor: 'red'}).focus(function()  {
				                 $(this).css({borderColor: 'rgb(200,200,200)'});
				                 $(this).prev().css({color: 'rgb(200,200,200)'});
				             });
				         }
				    });

					if (isValid) {
	                    $.fancybox.showActivity();              
	
	                    $.ajax({ 
                                type: "POST", 
                                data: $('#loginForm').serialize(), 
                                url: $('#loginForm').attr("action"), 
                                success: function(data) { 

									console.log(data.length);
									 
									if (data.length < 4000) {
										$.fancybox({
	                                		'transitionIn'	:   'elastic',
	                                		'transitionOut'	:   'elastic',
	                                		'speedIn'		:   600, 
	                                		'speedOut'		:   200, 
	                                		'overlayShow'	:   true,
	                                        'content'       :   data,
	                                        'autoDimensions':   true,
	                                        'width'         :   'auto',
	                                        'height'        :   'auto',
	                                        'onComplete'	: function() {
	                                        	$('#fancybox-wrap').css('width', 'auto');
	                                        }
	                                	});
									} else {
										$("html").html(data);	
									}                                   
                                } 
	                    });
					}

                    return false;
                });
                
            });
        </script>
{% endblock %}

{% block content %}
    <div class="overlay" id="loginAjax">   
        <h2>Se connecter</h2>
        {% if error %}
            <div class="error_summary">{{ error }}</div>
        {% endif %}
        <form action="{{ path("fos_user_security_check") }}" id="loginForm" method="post" novalidate="novalidate">
            <label for="username">Login :</label><span class="error"></span><br />
            <input type="text" id="username" name="_username" value="{{ last_username }}" />
            <br />
            <label for="password">Mot de passe :</label><span class="error"></span><br />
            <input type="password" id="password" name="_password" />
            <br />
            <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
            <label for="remember_me">Se rappeler de moi</label>
            <br />
            <button id="center" class="validate">Se connecter</button>
        </form>
    </div>
{% endblock %}